<template>
  <div >
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/admin/permission/list' }">权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="search">
      <el-input placeholder="请输入内容" v-model="kw" >
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        <el-button slot="append"  @click="reset" >重置</el-button>
      </el-input>
    </div>

    <div class="user-list">

      <el-card class="box-card tree">
        <div slot="header" class="clearfix">
          <span>权限列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="add({id:0})">添加顶级权限</el-button>
        </div>
        <div >
          <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            border
            lazy
            :load="load"
            default-expand-all
            row-key="id">
            <el-table-column
              label="#"
              width="70">
            </el-table-column>
            <el-table-column
              prop="name"
              label="权限值"
              width="250">
            </el-table-column>
            <el-table-column
              prop="display_name"
              label="权限名称">
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200">
              <template slot-scope="scope">
                <el-button @click="add(scope.row)" type="success" icon="el-icon-circle-plus" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-dialog title="权限操作" :visible.sync="dialogFormVisible" >
        <el-form :model="form" ref="permission" :rules="rules">
          <el-form-item label="权限值"  prop="name">
            <el-input v-model="form.name" ></el-input>
          </el-form-item>
          <el-form-item label="权限名称" prop="url">
            <el-input v-model="form.display_name" ></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="icon">
            <el-input v-model="form.description" ></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save(isAdd)">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 30, 50, 70]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    name: "PermissionList",
    data(){
      return {
        tableData:[],
        page:1,
        per_page:15,
        total:0,
        current_page:0,
        form:{},
        kw:'',
        rules:{
          name:[
            { required: true, message: '请输入英文名称', trigger: 'blur' },
            { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
          ],
          display_name:[
            { required: true, message: '请输入中文名称', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ]
        },
        dialogFormVisible:false
      }
    },
    created() {
      //this.getPermissions();
      this.getPermissions().then(res=>{
        //console.log(res);
        this.tableData = res.data;
        this.current_page = res.current_page;
        this.per_page = res.per_page;
        this.total = res.total
      })
    },
    methods:{
      getPermissions(id = 0){
        // this.axios.get(`/api/admin/permission/tree-permission/${id}`,{
        //   params:{page:this.page,per_page:this.per_page}
        // }).then(res=>{
        //   this.tableData = res.data.data.data;
        //   this.current_page = res.data.data.current_page;
        //   this.per_page = res.data.data.per_page;
        //   this.total = res.data.data.total
        // }).catch(err=>{
        //   this.$message.error(err.response.data.status)
        // })
        return new Promise((resolve, reject) => {
          this.axios.get(`/api/admin/permission/tree-permission/${id}`,{
            params:{page:this.page,per_page:this.per_page}
          }).then(res=>{
            resolve(res.data.data);
            //console.log(res);
          }).catch(err=>{
            reject(err.data);
          });
        });
      },
      load(tree, treeNode, resolve){

        this.getPermissions(tree.id).then(res=>{
          //console.log(res);
          resolve(res.data);
        })
      },
      handleSizeChange(val) {
        this.per_page = val;
        this.getPermissions().then(res=>{
          //console.log(res);
          this.tableData = res.data;
          this.current_page = res.current_page;
          this.per_page = res.per_page;
          this.total = res.total
        })
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getPermissions().then(res=>{
          //console.log(res);
          this.tableData = res.data;
          this.current_page = res.current_page;
          this.per_page = res.per_page;
          this.total = res.total
        })
      },
      editPermission(row){
        this.$router.push(`/admin/permission/edit/${row.id}`)
      },
      del(row){
        this.$confirm('你确认要做此操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //this.setUserStatus(row)
          if (row.children.length > 0){
            this.$message.error('该目录还有子目录，不能删除');
          }
          else{
            this.axios.delete(`/api/admin/permission/${row.id}`).then(res=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              //TODO::优化
              this.getPermissions().then(res=>{
                //console.log(res);
                this.tableData = res.data;
                this.current_page = res.current_page;
                this.per_page = res.per_page;
                this.total = res.total
              })
            }).catch(err=>{
              this.$message.error(err.response.data.message)
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });

        });
      },
      search(){
        if(this.kw === ''){
          this.$message.error('请输入搜索关键词')
          return ;
        }

        this.axios.post('/api/admin/permission/search',{
          kw:this.kw,
          per_page:this.per_page
        }).then(res=>{
          this.tableData = res.data.data.data;
          this.current_page = res.data.data.current_page;
          this.per_page = res.data.data.per_page;
          this.total = res.data.data.total
        }).catch(err=>{
          this.$message.error(err.response.data.message)
        })
      },
      reset(){
        this.kw = '';
        this.getPermissions().then(res=>{
          //console.log(res);
          this.tableData = res.data;
          this.current_page = res.current_page;
          this.per_page = res.per_page;
          this.total = res.total
        })

      },
      add(row){
        this.dialogFormVisible = true;
        this.form.pid = row.id;
        this.isAdd = true;
      },
      edit(row){
        this.dialogFormVisible = true;
        //this.form.pid = row.id;
        this.form = row;
        this.isAdd = false;
      },
      save(isAdd){
        if(isAdd){
          this.axios.post('/api/admin/permission',this.form).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            //this.tableData[this.form.pid].children.push(this.form);
            //console.log(this.tableData,this.form.pid)
            this.form = {pid:0};
            this.dialogFormVisible = false;
            //TODO::优化
            this.getPermissions().then(res=>{
              //console.log(res);
              this.tableData = res.data;
              this.current_page = res.current_page;
              this.per_page = res.per_page;
              this.total = res.total
            })
          }).catch(err=>{
            //this.$message.error(err.response.data.message)
            console.log(err);
          });
        }
        else{
          this.axios.put(`/api/admin/permission/${this.form.id}`,this.form).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            //this.tableData[this.form.pid].children.push(this.form);
            //console.log(this.tableData,this.form.pid)
            this.form = {pid:0};
            this.dialogFormVisible = false;
          }).catch(err=>{
            //this.$message.error(err.response.data.message)
            console.log(err);
          });
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .search{
    margin: 10px 0;
    .el-input-group{
      width: 47%;
    }
  }
  .page{
    margin-top: 5px;
  }
</style>
